<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
        size="small"
        >添加
      </el-button>
      <el-input
        v-model="listQuery.username"
        placeholder="请输入部门名称"
        style="width: 200px"
        class="filter-item"
        size="small"
        clearable
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        size="small"
        >搜索
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      size="small"
    >
      <el-table-column align="center" label="部门ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="部门名称" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="人数" width="95">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleUpdate(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="viewmeber(scope.row)"
            >查看员工</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        size="small"
        :current-page="listQuery.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="listQuery.limit"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-position="left"
        label-width="130px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入部门" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveData" :loading="btnLoading"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        nickname: '',
        is_forbidden: '',
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加',
      },
      channel: { name: '' },
      form: {
        id: '',
        name: undefined,
        full_name: undefined,
        contact_phone: undefined,
        contact_email: undefined,
        channel_id: undefined,
        channel_commission_rate: undefined,
        is_normal: 1,
        ips: undefined,
        channel_price_rate: 0,
        bind_api_accounts: [],
      },
      rules: {
        username: [
          { required: true, message: '成员账号不能为空', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '成员名称不能为空', trigger: 'blur' },
        ],
        full_name: [
          { required: true, message: '成员全称不能为空', trigger: 'blur' },
        ],
        contact_phone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' },
        ],
        contact_email: [
          { required: true, message: '联系邮箱不能为空', trigger: 'blur' },
        ],
        is_normal: [
          { required: true, message: '状态不能为空', trigger: 'blur' },
        ],
        channel_price_rate: [
          { required: true, message: '渠道加价比率不能为空', trigger: 'blur' },
        ],
      },
      btnLoading: false,
      apiAccountList: [],
    }
  },
  created() {
    this.listLoading = false
    // this.getApiAccountList()
    // this.getList()
  },
  methods: {
    viewmeber(item) {
      this.$router.push({
        path: '/adminManagement/viewemployee',
        query: { id: item.id },
      })
    },
    getChannelData(id) {
      this.channel.name = null
      request({
        url: '/api/backend/channel/detail',
        method: 'get',
        params: {
          id,
        },
      }).then((response) => {
        if (response.data) {
          this.channel = response.data
        }
      })
    },

    getApiAccountList() {
      this.channel.name = null
      request({
        url: '/api/backend/api-account/list',
        method: 'get',
        params: {
          limit: 9999999999,
        },
      }).then((response) => {
        if (response.data) {
          this.apiAccountList = response.data.data
        }
      })
    },
    getList() {
      this.listLoading = true
      request({
        url: '/api/backend/app-client/list',
        method: 'get',
        params: this.listQuery,
      }).then((response) => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    resetForm() {
      this.form = {
        name: undefined,
        is_normal: 1,
        ips: undefined,
        channel_price_rate: 0,
      }
      this.btnLoading = false
    },
    handleCreate() {
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    handleUpdate(row) {
      this.resetForm()
      this.form = Object.assign(
        {
          imgArray: [
            'http://img.qkjcrm.com/c9fd9e7a-6e3c-42c7-8c9a-22c20cd3db22.png',
            'http://img.qkjcrm.com/f860dce0-04e4-49c4-926e-4a7a0360c8b0.png',
          ],
        },
        row
      ) // copy obj
      this.form.channel_commission_rate =
        this.form.channel_commission_rate * 100
      this.form.channel_price_rate = this.form.channel_price_rate * 100
      this.getChannelData(this.form.channel_id)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    saveData() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          var form = JSON.parse(JSON.stringify(this.form))
          form.channel_commission_rate = form.channel_commission_rate / 100
          form.channel_price_rate = form.channel_price_rate / 100
          request({
            url: '/api/backend/app-client/store',
            method: 'post',
            data: form,
          })
            .then((response) => {
              this.btnLoading = false
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success',
                duration: 2000,
              })
              this.getList()
            })
            .catch((err) => {
              this.btnLoading = false
            })
        }
      })
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}
</style>
